<!-- 商品筛选 -->
<template>
  <div id="yz_goodScreen">
    <van-popup v-model="show" position="right" @touchMove.stop>
      <div class="screening">
        <div class="bandBox" >
          <div class="title">品牌</div>
          <div class="bandlist">
            <div class="bandlis" :class="val.id == emitData.brandId?'select_bandlis':''" v-for="(val, key) in brand" :key="key" @click="screenbrand(val.id)" >{{ val.name }}</div>
          </div>
        </div>
        <div v-if="!showCategory" class='bandBox'>
          <div class="title">分类</div>
          <!-- 如果是点击分类进来的就不显示 -->
          <div id="div2">
            <van-collapse v-model="activeNames" accordion>
              <div v-for="(val, key) in classification1" :key="key" @click="classificationtype(val.id, key)">
                <van-collapse-item v-show="val.name" :title="val.name" :name="key" :is-link="val.son.length > 0" >
                  <template #title>
                    <div class="collapseHead">
                      <div class="collapseTitle">{{val.name}}</div>
                      <div class="collapseTitle dc" v-if="classShowind == key">{{classShowName}}</div>
                    </div>
                  </template>
                  <div class="classify">
                    <div v-for="(val1, key1) in val.son" :key="key1" class="divbox1" >
                      <p :class="{ chooseFir: classificationkey1 == key1 }" class="selectChoose" @click.stop="classificationtype1(val1.id, key1,key,val1)" v-show="classificationkey1 == key1">
                        <span>{{ val1.name }}</span>
                      </p>
                      <p :class="{ chooseFir: classificationkey1 == key1 }" @click.stop="classificationtype1(val1.id, key1,key,val1)" v-show="classificationkey1 == null">
                        <span>{{ val1.name }}</span>
                      </p>
                      <div class="box-second">
                        <div v-for="(val2, key2) in val1.has_many_children" :key="key2" @click.stop="classificationtype2(val2.id, key2,key,val2,val1)" v-show="classificationkey1 == key1" class="divbox2">
                          <p
                            :class="{
                              'choose-third': classificationkey2 == key2
                            }"
                          >
                            <span>{{ val2.name }}</span>
                            <!-- <span :class="{ color1: classificationkey2 != key2 }"> <img class="img-box2" src="@/assets/images/cur@3x.png" alt=""/></span> -->
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </van-collapse-item>
              </div>
            </van-collapse>
          </div>
        </div>
        <div class="bandBox" v-if="this.$route.name != 'LeaseSearch'">
          <div class="title">属性
            <span>(多选)</span>
          </div>
          <div class="bandlist">
            <div class="bandlis" :class="val.show?'':'select_bandlis'" v-for="(val, key) in attr" :key="key" @click="selectattr(key, val)" >{{ val.name }}</div>
          </div>
        </div>
        <div class="bandBox" v-if="this.$route.name != 'LeaseSearch'">
          <div class="title">价格区间</div>
          <div class="price">
            <div class="miniPrice">
              <van-field
                v-model="emitData.mini"
                placeholder="最低价"
                input-align="center"
              />
            </div> 
            <div class="line"></div>
            <div class="topPrice">
              <van-field
                v-model="emitData.top"
                placeholder="最高价"
                input-align="center"
              />  
            </div> 
          </div>
        </div>
        <div class="bandBox" v-if="this.$route.name == 'LeaseSearch'">
          <div class="title">供应商</div>
          <div class="bandlist">
            <div class="bandlis" :class="val.id == emitData.supplier_id?'select_bandlis':''" v-for="(val, key) in supplierInfo" :key="key" @click="screensupplier(val.id)" >{{ val.name }}</div>
          </div>
        </div>
        <div class="bandBox" v-if="this.$route.name != 'LeaseSearch'">
          <div class="title">高级选项
            <span>(多选)</span>
          </div>
          <div class="bandlist">
            <div id="div4">
              <dl v-for="(val, key) in tagname" :key="key">
                <dt>
                  {{ val.name }}
                  <span @click="showtagname(key)" v-if="val.value.length > 2"
                    >{{ showtagnamekey != key ? "更多" : "收起" }}
                    <span class="icon" :class="{ icon1: showtagnamekey == key }"></span>
                  </span>
                </dt>
                <dd :class="{ color2: showtagnamekey != key }" class="div4-dd">
                  <span v-for="(val1, key1) in val.value" :key="key1" @click="selectname($event, val1.id, key, key1)"  :class="{ select_bandlis: val1.record == 2 }" :data="val1.id">{{ val1.name }} </span>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <van-collapse v-model="goodScreenAll" :border="false">
          <!-- <van-collapse-item :title="screentitle[0]" name="1" v-if="brand && brand.length > 0" :border="false" title-class='collapseall-title-class'>
            <div id="div1">
              <div v-for="(val, key) in brand" :key="key" @click="screenbrand(val.id)">
                <img :src="val.logo" />
                <span style="word-break: break-all;">{{ val.name }}</span>
              </div>
            </div>
          </van-collapse-item> -->
          <!-- <van-collapse-item :is-link="false" :title="screentitle[1]" name="2" v-if="!showCategory" :border="false" title-class='collapseall-title-class'>
            <div id="div2">
              <van-collapse v-model="activeNames" accordion>
                <div v-for="(val, key) in classification1" :key="key" @click="classificationtype(val.id, key)">
                  <van-collapse-item v-show="val.name" :title="val.name" :name="key" :is-link="val.son.length > 0" :icon="classificationkey == key ? 'passed' : ''">
                    <div class="classify">
                      <div v-for="(val1, key1) in val.son" :key="key1" class="divbox1" :class="{ m100: classificationkey1 == key1 }">
                        <p :class="{ chooseFir: classificationkey1 == key1 }" @click.stop="classificationtype1(val1.id, key1)" v-show="classificationkey1 == key1">
                          <span class="none-choose" :class="{ color1: classificationkey1 != key1 }">
                            <img class="img-box" src="@/assets/images/current@3x.png" alt="" />
                          </span>
                          <span>{{ val1.name }}</span>
                        </p>

                        <p :class="{ chooseFir: classificationkey1 == key1 }" @click.stop="classificationtype1(val1.id, key1)" v-show="classificationkey1 == null">
                          <span class="none-choose" :class="{ color1: classificationkey1 != key1 }">
                            <img class="img-box" src="@/assets/images/current@3x.png" alt="" />
                          </span>
                          <span>{{ val1.name }}</span>
                        </p>

                        <div class="box-second">
                          <div v-for="(val2, key2) in val1.has_many_children" :key="key2" @click.stop="classificationtype2(val2.id, key2)" v-show="classificationkey1 == key1" class="divbox2">
                            <p
                              :class="{
                                'choose-third': classificationkey2 == key2
                              }"
                            >
                              <span>{{ val2.name }}</span>
                              <span :class="{ color1: classificationkey2 != key2 }"> <img class="img-box2" src="@/assets/images/cur@3x.png" alt=""/></span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-collapse-item>
                </div>
              </van-collapse>
            </div>
          </van-collapse-item> -->

          <!-- <van-collapse-item :title="screentitle[2]" name="3" v-if="attr && attr.length > 0" :border="false" title-class='collapseall-title-class'>
            <div id="div3">
              <p v-for="(val, key) in attr" :key="key" @click="selectattr(key, val)">
                <span class="title">{{ val.name }}</span>
                <span class="choose" :class="{ color1: val.show }">
                  <img class="img-box" src="@/assets/images/current@3x.png" alt="" />
                </span>
              </p>
            </div>
          </van-collapse-item> -->

          <!-- <van-collapse-item :title="screentitle[3]" name="4" v-if="tagname && tagname.length > 0" :border="false" title-class='collapseall-title-class'>
            <div id="div4">
              <dl v-for="(val, key) in tagname" :key="key">
                <dt>
                  {{ val.name }}
                  <span @click="showtagname(key)" v-if="val.value.length > 2"
                    >{{ showtagnamekey != key ? "更多" : "收起" }}
                    <span class="icon" :class="{ icon1: showtagnamekey == key }"></span>
                  </span>
                </dt>
                <dd :class="{ color2: showtagnamekey != key }" class="div4-dd">
                  <span v-for="(val1, key1) in val.value" :key="key1" @click="selectname($event, val1.id, key, key1)" :class="{ color: val1.record == 2 }" :data="val1.id">{{ val1.name }} </span>
                </dd>
              </dl>
            </div>
          </van-collapse-item> -->
        </van-collapse>
        <div class="button">
          <div class="btn" @click="resetnames">重置</div>
          <div class="btn" @click="screen">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    showCategory: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        if (this.brand.length == 0) this.getbrand();
        if (this.classification1.length == 0) this.getclassification();
        if (this.tagname.length == 0) this.getname();
        if (this.$route.name == 'LeaseSearch' && this.supplierInfo.length == 0) this.getSupplier();
      }
    }
  },
  data() {
    return {
      goodScreenAll: [],
      show: this.value,
      screentitle: ["品牌", "分类", "属性", "高级选项"], //筛选标题
      brand: [],
      attr: [
        {
          name: "推荐商品",
          show: true
        },

        {
          name: "新品上市",
          show: true
        },

        {
          name: "热卖商品",
          show: true
        },

        {
          name: "促销商品",
          show: true
        },

        {
          name: "限时抢购",
          show: true
        }
      ],
      activeNames: [],
      classification1: [],
      classificationkey: null,
      classificationkey1: null,
      classificationkey2: null,
      classShowind:'',
      classShowName:'',

      attrstr: [],
      attrkey: [],

      tagname: [],
      showtagnamekey: null,

      filterId: [],

      brandId: 0, //选择的品牌id
      emitData: {}, //需要传给父组件的数据
      supplierInfo:[]
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    getSupplier(){
      $http.get("plugin.yz-supply-lease.api.goods.supplier-list",{},'.').then(res => {
        if (res.result == 1) {
          this.supplierInfo = res.data;
        }
      });
    },
    cloneModel() {
      this.$emit("clone", this.emitData);
      this.$emit("input", false);
    },
    //品牌相关的功能
    getbrand() {
      $http.post("goods.brand.get-brand",{},'.').then(res => {
        this.brand = res.data.data;
        console.log(this.brand)
      });
    },
    //分类相关的功能
    getclassification() {
      $http.get("goods.category.search-goods-category",{},'.').then(res => {
        this.classification1 = res.data;
      });
    },
    getname() {
      $http.get("goods.filtering.index",{},'.').then(res => {
        if (res.result == 1) {
          this.tagname = res.data;
          for (let i = 0; i < this.tagname.length; i++) {
            for (let y = 0; y < this.tagname[i].value.length; y++) {
              this.tagname[i].value[y].record = 1;
            }
          }
        }
      });
    },
    screenbrand(id) {
      this.emitData.brandId = id;
      this.cloneModel();
    },
    screensupplier(id){
      this.emitData.supplier_id = id; 
      this.cloneModel();
    },
    classificationtype(id, key) {
      this.emitData.typestring = id;

      if (this.classificationkey == key) {
        this.classificationkey = null;
        return;
      } else {
        this.classificationkey = key;
      }
      this.classificationkey1 = null;
      this.classificationkey2 = null;
      this.classificationshow = false;
    },
    classificationtype1(id, key,ind,val) {
      this.emitData.typestring = id;
      this.classificationshow = true;

      if (this.classificationkey1 == key) {
        this.classificationkey1 = null;
        this.classShowName = "";
        this.classShowind = "";
      } else {
        this.classificationkey1 = key;
        this.classShowName = val.name;
        this.classShowind = ind;
      }

      this.classificationkey2 = null;
    },
    classificationtype2(id, key,ind,val,val1) {
      if (this.emitData.typestring == id) {
        this.emitData.typestring = "";
      } else {
        this.emitData.typestring = id;
      }

      if (this.classificationkey2 == key) {
        this.classificationkey2 = null;
        this.classShowName = val1.name;
        this.classShowind = ind;
      } else {
        this.classificationkey2 = key;
        this.classShowName = val.name;
        this.classShowind = ind;
      }
    },
    selectattr(key, val) {
      //属性选择项
      switch (key) {
        case 0:
          this.findstr("is_recommand", key);
          break;
        case 1:
          this.findstr("is_new", key);
          break;
        case 2:
          this.findstr("is_hot", key);
          break;
        case 3:
          this.findstr("is_discount", key);
          break;
        case 4:
          this.findstr("limit_buy", key);
          break;
      }
      if (!val.show) {
        this.$set(val, "show", true);
      } else {
        this.$set(val, "show", false);
      }
    },
    //属性相关的功能
    findstr(attrstr, key) {
      let index = this.attrstr.indexOf(attrstr);
      index + 1 ? this.attrstr.splice(index, 1) : this.attrstr.push(attrstr);
      let index1 = this.attrkey.indexOf(key);
      index1 + 1 ? this.attrkey.splice(index1, 1) : this.attrkey.push(key);

      this.emitData.attrstr = this.attrstr.join(",");
    },
    //标签组相关功能
    showtagname(key) {
      if (key == this.showtagnamekey) {
        this.showtagnamekey = null;
      } else {
        this.showtagnamekey = key;
      }
    },
    selectname(e, id, key1, key2) {
      console.log(e.target.className)
      if (e.target.className.indexOf("select_bandlis") == -1) {
        e.target.className = "select_bandlis"; //切换按钮样式
        if (this.filterId.includes(id)) {
          return;
        } else {
          this.filterId.push(id);
        }

        //写逻辑 增加name
      } else {
        e.target.className = ""; //切换按钮样式
        let index = this.filterId.indexOf(id);
        this.filterId.splice(index, 1);
        //写逻辑 减少name
      }

      if (this.tagname[key1].value[key2].record == 1) {
        this.$set(this.tagname[key1].value[key2], "record", 2);
      } else {
        this.$set(this.tagname[key1].value[key2], "record", 1);
      }
      this.emitData.filterId = this.filterId.toString();
    },
    resetnames() {
      // 重置
      this.emitData = {};
      this.namestring = null;
      this.showtagnamekey = null;
      this.namekey = null;

      this.brandId = "";
      this.attrstr = [];
      this.filterId = [];
      this.brandId = "";
      this.attr = [
        {
          name: "推荐商品",
          show: true
        },

        {
          name: "新品上市",
          show: true
        },

        {
          name: "热卖商品",
          show: true
        },

        {
          name: "促销商品",
          show: true
        },

        {
          name: "限时抢购",
          show: true
        }
      ];
      this.removeClass();
      this.resettypes();
    },
    resettypes() {
      this.emitData.typestring = "";
      this.classificationkey = null;
      this.classificationkey1 = null;
      this.classificationkey2 = null;
    },
    removeClass() {
      let dd = document.getElementsByClassName("div4-dd");

      for (let i = 0; i < dd.length; i++) {
        let span = dd[i].getElementsByTagName("span");
        for (let y = 0; y < span.length; y++) {
          span[y].setAttribute("class", "");
        }
      }
      for (let i = 0; i < this.tagname.length; i++) {
        for (let y = 0; y < this.tagname[i].value.length; y++) {
          if (this.tagname[i].value[y].record == 2) {
            this.tagname[i].value[y].record = 1;
          }
        }
      }
    },
    screen() {
      this.cloneModel();
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#yz_goodScreen {
  //新样式
  .bandBox {
    .attrBox {
      display: flex;
    }

    .price {
      display: flex;
      align-items: center;
      margin-left: 0.75rem;

      .line {
        margin: 0 0.325rem;
        width: 0.5rem;
        height: 0.06rem;
        background: #000;
      }

      .miniPrice,
      .topPrice {
        width: 7.06rem;
        background: #f6f6f6;
        border-radius: 0.25rem;
        color: #999;
        text-align: center;
        line-height: 2.03rem;

        .van-cell {
          background: #f6f6f6;
        }
      }
    }

    .collapseHead {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .collapseTitle {
        font-size: 0.88rem;
      }

      .dc {
        color: #e95352;
        font-size: 0.75rem;
      }
    }

    .title {
      font-size: 1rem;
      text-align: left;
      padding: 0.75rem;
      font-weight: bold;
    }

    .bandlist {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-left: 0.75rem;

      .bandlis {
        min-width: 5.69rem;
        padding: 0.5rem 0.97rem;
        margin-right: 0.5rem;
        margin-bottom: 0.75rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #f6f6f6;
      }

      .select_bandlis {
        background-image: url('../../assets/images/yz_goodScreen/image1@2x.png') !important;
        height: 100% !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
      }
    }

    .selectChoose {
      background-image: url('../../assets/images/yz_goodScreen/image1@2x.png');
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .screening {
    width: 20rem;
    min-height: 100vh;
    background: #fff;
    text-align: center;

    .tabs {
      font-weight: bold;
      font-size: 16px;
      display: block;
      margin: 0.5rem 0.5rem 0 0.5rem;
      text-align: left;

      /* width: 30%; */

      /* background: #f5f5f5; */
      line-height: 1.6875rem;
      border-radius: 0.1875rem;
    }

    #div1 {
      display: flex;
      flex-wrap: wrap;
      text-align: center;

      div {
        padding-top: 0.625rem;
        width: 25%;

        img {
          display: block;
          width: 4rem;
          height: 4rem;
        }

        span {
          display: inline-block;
          margin-top: 0.625rem;
        }
      }
    }

    .classify {
      display: flex;
      flex-wrap: wrap;
    }

    .m100 {
      width: 100%;
    }

    .divbox1 {
      // margin: 0.2rem 0.5rem;
      text-align: left;

      p {
        display: inline-block;
        font-size: 15px;
        text-align: center;
        line-height: 2rem;
        margin: 0.5rem;
        min-width: 3rem;
        border-radius: 0.25rem;
        background-color: #f6f6f6;
        padding: 0 0.5rem;
        height: 2rem;
        // border-radius: 5px;
        position: relative;

        .none-choose {
          height: 1rem;
          vertical-align: center;
        }

        .img-box {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
          vertical-align: center;
        }
      }

      .chooseFir {
        color: #e60012;
        min-width: 5rem;
      }

      .box-second {
        display: flex;
        flex-wrap: wrap;
      }

      .divbox2 {
        /* width: 100%; */
        font-size: 15px;
        text-align: center;
        line-height: 2rem;

        /* text-indent: 3.125rem; */
        color: rgba(0, 0, 0, 0.5);

        /* border-bottom: solid 0.0625rem #ebebeb; */
        // margin: 0.3rem;

        p {
          /* width: 5rem; */
          min-width: 3rem;
          border-radius: 0.25rem;
          background-color: #f6f6f6;
          height: 2rem;
          position: relative;
        }

        .choose-third {
          // border: solid 1px #e60012;
          background-color: #e95352;
          color: #fff;
          border-radius: 0.25rem;
        }

        .img-box2 {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }

    #div2 {
      /* padding-left: 0.875rem; */
      .van-collapse-item__content {
        padding: 0;
      }

      #divbox {
        box-sizing: border-box;

        & > p {
          /* width: 100%; */
          font-size: 15px;
          text-align: left;
          line-height: 2.5rem;
          height: 2.5rem;
          font-weight: bold;

          /* text-indent: 0.625rem; */
          border-bottom: solid 0.0625rem #ebebeb;
          position: relative;
        }
      }

      footer {
        div {
          width: 3.5rem;
          line-height: 1.5rem;
          text-align: center;
          border-radius: 0.1875rem;
          float: left;

          &:nth-of-type(1) {
            border: solid 0.0625rem #f15353;
            background: #f15353;
            color: #fff;
            margin: 1rem 0 0 60%;
          }

          &:nth-of-type(2) {
            border: solid 0.0625rem #f15353;
            color: #f15353;
            background: #fff;
            margin: 1rem 0 0 5%;
          }
        }
      }
    }

    #div3 {
      box-sizing: border-box;
      padding-left: 0.875rem;

      p {
        font-size: 15px;
        text-align: left;
        line-height: 2.5rem;
        height: 2.5rem;

        /* text-indent: 0.625rem; */
        border-bottom: solid 0.0625rem #ebebeb;
        position: relative;
        display: flex;

        .title {
          flex: 1;
        }

        .choose {
          flex: 0 0 2rem;
        }

        .img-box {
          display: inline-block;
          width: 0.8rem;
          height: 0.8rem;
        }

        /* span {
          position: absolute;
          right: 1rem;
          top: 1rem;
          display: block;
          width: 1.25rem;
          height: 0.625rem;
          border: solid 0.1875rem #f15353;
          border-top: transparent;
          border-right: transparent;
          transform: rotate(-45deg);
        } */
      }

      div {
        width: 3.5rem;
        line-height: 1.5rem;
        text-align: center;
        border-radius: 0.1875rem;
        float: left;

        &:nth-of-type(1) {
          border: solid 0.0625rem #f15353;
          background: #f15353;
          color: #fff;
          margin: 1rem 0 0 60%;
        }

        &:nth-of-type(2) {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background: #fff;
          margin: 1rem 0 0 5%;
        }
      }
    }

    #div4 {
      dl {
        box-sizing: border-box;
        padding: 0 0.875rem;
        font-size: 15px;

        dt {
          text-align: left;
          line-height: 2.5rem;
          text-indent: 0.9375rem;
          font-weight: bold;

          span {
            float: right;
            font-size: 13px;
            color: #c9c9c9;
            font-weight: normal;

            .icon {
              width: 0.4375rem;
              height: 0.4375rem;
              margin: 0.9375rem 0.9375rem 0 0.3125rem;
              border: solid 0.0625rem #c9c9c9;
              border-left: transparent;
              border-top: transparent;
              transform: rotate(45deg);
            }

            .icon1 {
              width: 0.4375rem;
              height: 0.4375rem;
              margin: 0.9375rem 0.9375rem 0 0.3125rem;
              border: solid 0.0625rem #c9c9c9;
              border-left: transparent;
              border-top: transparent;
              transform: rotate(225deg);
            }
          }
        }

        dd {
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;

          span {
            display: block;
            background: #f6f6f6;
            width: 4.9375rem;
            line-height: 1.875rem;
            height: 1.875rem;
            float: left;
            margin: 0 0.625rem 0.75rem 0;
            border-radius: 0.1875rem;
            padding: 0 0.125rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666;
          }

          span:nth-child(4n) {
            margin-right: 0;
          }
        }
      }

      .select_bandlis {
        background-image: url('../../assets/images/yz_goodScreen/image1@2x.png') !important;
        height: 100% !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
        color: #e95352;
      }
    }
  }

  .button {
    width: 100%;
    height: 3rem;
    line-height: 2rem;
    display: flex;
    background: #fff;
    padding: 0 0.5rem 0.5rem 0;

    div {
      width: 3.5rem;
      line-height: 2rem;
      text-align: center;
      border-radius: 0.1875rem;

      &:nth-of-type(1) {
        border: solid 0.0625rem #f15353;
        background: #f15353;
        color: #fff;
        margin: 0.5rem 0 0 50%;
      }

      &:nth-of-type(2) {
        border: solid 0.0625rem #f15353;
        color: #f15353;
        background: #fff;
        margin: 0.5rem 0 0 5%;
      }
    }

    .btn {
      flex: 1;
    }
  }

  .color {
    color: #f15353;
    background: #fff !important;
    border: solid 0.0625rem #f15353;
  }

  .color1 {
    display: none !important;
  }

  .color2 {
    max-height: 2.625rem;
  }
}

::v-deep .van-collapse .van-collapse-item .collapseall-title-class {
  text-align: left;
  font-weight: bold;
  color: #000;
  font-size: 1rem !important;
}
</style>
// <style lang="scss" rel="stylesheet/scss">
// #yz_goodScreen {
//   .van-cell__title{
//     text-align: left;
//     font-weight: bold;
//     color: #000;
//     font-size: 1rem!important;
//     ::v-deep #div2 .van-cell__title{
//       font-weight: 400;
//     }
//   }
// }
//
 </style>
